/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <transition name="slide">
  <div class="device-chart-panel" v-show="isShrink" >
    <div class="content">
      <div class="top">
        <div class="left">
          <span class="text-top">
            <span class="green" @click="handleClickToPage('UP')">{{params.upCount}}</span>
            <span class="white" >/ {{params.allCount}}</span>
          </span>
          <span class="text-bottom">
            <span class="white up" @click="handleClickToPage('UP')">{{$t('openatc.devicemanager.onLineCount')}}</span>
            <span class="white" >/ {{$t('openatc.devicemanager.offLineCount')}}</span>
          </span>
        </div>
        <div class="right">
          <span class="text-top">
            <span class="yellow" @click="handleClickToPage('inter')">{{params.interCount}}</span>
          </span>
          <span class="text-bottom white" @click="handleClickToPage('inter')">{{$t('openatc.devicemanager.interruputCount')}}</span>
        </div>
      </div>
      <div class="bottom">
        <div class="content" id="main"></div>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import { getTheme, hasPermission } from '../../../../utils/auth.js'
import { getMessageByCode } from '../../../../utils/responseMessage'
import { getDeviceRange } from '../../../../api/device'
import { setControlModes, setCrossStates, clearCrossFilter } from '../../../../utils/crossFilterMgr'
import * as echarts from 'echarts'

export default {
  name: 'deviceChart',
  data () {
    return {
      params: {
        upCount: 0,
        downCount: 0,
        allCount: 0,
        interCount: 0
      },
      textColor: getTheme() === 'light' ? '#000000' : '#FFFFFF',
      // Color: ['#FAC858', '#ee6666', '#5470C6', '#f8723a', '#EA7CCC', '#0681D7', '#00A0E9', '#73C0DE', '#3BA272', '#80B3FF', '#7A6400', '#3BA272'],
      controlColor: [
        {
          control: 0,
          color: '#FAC858'
        },
        {
          control: 1,
          color: '#00000'
        },
        {
          control: 2,
          color: '#EE6666'
        },
        {
          control: 3,
          color: '#222831'
        },
        {
          control: 4,
          color: '#EA7CCC'
        },
        {
          control: 5,
          color: 'yellow'
        },
        {
          control: 6,
          color: '#00A0E9'
        },
        {
          control: 7,
          color: '#73C0DE'
        },
        {
          control: 8,
          color: '#3BA272'
        },
        {
          control: 9,
          color: '#80B3FF'
        },
        {
          control: 10,
          color: '#3BA272'
        },
        {
          control: 11,
          color: '#649DAD'
        },
        {
          control: 12,
          color: '#17B978'
        },
        {
          control: 13,
          color: '#95E8D7'
        },
        {
          control: 14,
          color: '#A7FF83'
        },
        {
          control: 15,
          color: '#C0FFC2'
        },
        {
          control: 16,
          color: '#ff965f'
        },
        {
          control: 17,
          color: '#1E56A0'
        },
        {
          control: 18,
          color: '#A7EFE9'
        },
        {
          control: 19,
          color: '#A7EFE9'
        },
        {
          control: 20,
          color: '#FAC858'
        },
        {
          control: 21,
          color: '#FAC858'
        },
        {
          control: 22,
          color: '#FAC858'
        },
        {
          control: 23,
          color: '#FAC858'
        },
        {
          control: 24,
          color: '#00FFF5'
        },
        {
          control: 99,
          color: '#B80D57'
        },
        {
          control: 100,
          color: '#87DFD6'
        },
        {
          control: 101,
          color: '#4DCAA2'
        }
      ],
      list: [
        {
          id: 1,
          key: 'devicemanager',
          imgClass: 'devicemanager',
          defaultIcon: 'devicemanager',
          activeIcon: 'devicemanager-choose',
          type: this.$t('openatc.main.devicemanager'),
          color: getTheme() === 'light' ? '#909399' : '#B9BABF'
        }
      ]
    }
  },
  components: {
  },
  props: {
    isShrink: {
      type: Boolean,
      default: true
    },
    searchfilter: {
      type: String,
      default: ''
    }
  },
  watch: {
    searchfilter (val) {
      this.doSearch(this.searchfilter)
    }
  },
  methods: {
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    },
    handleClickToPage (name) {
      if (this.isHasPermission('openatc:base:intersection')) {
        clearCrossFilter()
        switch (name) {
          case 'UP':
            setCrossStates(name)
            break
          case 'down':
            setCrossStates(name)
            break
          case '':
            setCrossStates(name)
            break
          case 'inter':
            setControlModes('999')
            break
          default: break
        }
        this.$router.push({ path: '/device' })
        this.$store.dispatch('SetActiveMenuName', 'device')
      }
    },
    doSearch (searchfilter) {
      this.getDeviceRanges(searchfilter)
    },
    getDeviceRanges (devsfilter) {
      // 按搜索条件查询路口信息
      let reqData = {
        'pageNum': 1,
        'pageRow': 10000,
        'search': devsfilter,
        'type': '',
        'platform': '',
        'protocol': '',
        'state': '',
        'code': '',
        'control': -1,
        'mode': -1,
        'tags': ''
      }
      let list = []
      return getDeviceRange(reqData).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        if (res.data.data.content) {
          list = res.data.data.content
        } else {
          list = []
        }
        this.$emit('onDeviceSearch', list)
        this.params.allCount = list.length
        list = list.filter(item => item.state === 'UP')
        this.params.upCount = list.length
        let interList = list.filter(item => item.mode && item.mode !== 0)
        this.params.interCount = interList.length
        let modeList = []
        let controlList = []
        list = list.map(cross => {
          const mode = cross.mode
          const control = cross.control
          let modeName = mode === undefined ? this.$t('openatc.common.none') : this.$t('openatc.patternstatistic.mode' + mode)
          let controlName = control === undefined ? this.$t('openatc.common.none') : this.$t('openatccomponents.overview.modelList' + control)
          let res = {
            ...cross,
            modeName: modeName,
            controlName: controlName
          }
          let findMode = modeList.find(item => item.name === res.modeName)
          if (!findMode) {
            let item = {
              name: res.modeName,
              value: 1
            }
            if (mode === undefined) {
              item.itemStyle = {color: '#00dfe7'}
            }
            modeList.push(item)
          } else {
            findMode.value = findMode.value + 1
          }
          let findControl = controlList.find(item => item.name === res.controlName)
          if (!findControl) {
            let item = {
              name: res.controlName,
              value: 1
            }
            let colorItem = this.controlColor.find(item => item.control === control)
            let color = colorItem ? colorItem.color : ''
            let itemstyle = {
              color: color
            }
            item.itemstyle = itemstyle
            if (!control) {
              item.itemStyle = {color: '#17cdc2'}
            }
            if (control === 1) {
              item.itemStyle = {color: '#FAC858'}
            } else if (control === 2) {
              item.itemStyle = {color: '#EE6666'}
            } else if (control === 5) {
              item.itemStyle = {color: '#299bcc'}
            } else if (control === 10) {
              item.itemStyle = {color: '#32c14d'}
            } else if (control === 16) {
              item.itemStyle = {color: '#ff965f'}
            }
            controlList.push(item)
          } else {
            findControl.value = findControl.value + 1
          }
          return res
        })
        this.devList = list
        this.initChart(modeList, controlList)
        return list
      })
    },
    treeNodeClick (data) {
      this.$emit('treeNodeClick', data)
    },
    handleClickItem (data) {
      this.$emit('handleClickItem', data)
    },
    formatLabel (row) {
      let name = row.name
      let value = row.value
      let percent = Math.round(row.percent)
      let res = `${name} \n ${value} / ${percent}%`
      return res
    },
    initChart (modeList, controlList) {
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: false,
          data: [
            'Direct',
            'Marketing',
            'Search Engine',
            'Email',
            'Union Ads',
            'Video Ads',
            'Baidu',
            'Google',
            'Bing',
            'Others'
          ]
        },
        series: [
          {
            name: this.$t('openatc.devicemanager.controlType'),
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              color: this.textColor,
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1548, name: 'Search Engine' },
              { value: 775, name: 'Direct' },
              { value: 679, name: 'Marketing' }
            ]
          },
          {
            name: this.$t('openatc.devicemanager.controlMode'),
            type: 'pie',
            radius: ['60%', '45%'],
            labelLine: {
              length: 25
            },
            label: {
              // formatter: '{b|{b}}\n{hr|}\n {c}/{per|{@name}%}',
              formatter: this.formatLabel,
              borderRadius: 4,
              color: this.textColor,
              padding: [23, 0],
              fontSize: 12,
              lineHeight: 15,
              rich: {
                a: {
                  color: this.textColor,
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: this.textColor,
                  fontSize: 12,
                  fontWeight: 'normal',
                  lineHeight: 20
                },
                per: {
                  color: this.textColor,
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: 1048, name: 'Baidu' },
              { value: 335, name: 'Direct' },
              { value: 310, name: 'Email' },
              { value: 251, name: 'Google' },
              { value: 234, name: 'Union Ads' },
              { value: 147, name: 'Bing' },
              { value: 135, name: 'Video Ads' },
              { value: 102, name: 'Others' }
            ]
          }
        ]
      }
      let legendData = controlList.map(item => item.name)
      option.legend.data = legendData
      option.series[0].data = modeList
      option.series[1].data = controlList
      option && myChart.setOption(option)
    }
  },
  mounted () {
    this.doSearch(this.searchfilter)
    // this.initChart()
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
</style>
